<template>
	<div class="store-list-wrap" >
		<div class="top-fix" >
			<div
			class="search-box" >
				<img @click="handleToBack" class="search-left-arrow" :src="searchLeftArrow" alt="">
				
				<div class="search-input" >
					<van-search
					  v-model="searchValue"
					  placeholder="请输入商品或者分类"
					  @search="onSearch"
					  :left-icon="searchHistoryIcon"
					>
					</van-search>
					
					<div class="search-btn active-btn" @click="handleToSearch" >搜索</div>
				</div>
			</div>
			
			<div class="tab-ul" >
				<div @click="handleToTag('distance')" :class="['tab-li', distance ? 'on' : '']" >附近1km</div>
				<div @click="handleToTag('new_store')" :class="['tab-li', new_store ? 'on' : '']" >新店</div>
				<div @click="handleToTag('recommend')" :class="['tab-li', recommend ? 'on' : '']" >平台推荐</div>
				<div style="opacity: 0;" :class="['tab-li', public_status ? 'on' : '']" >公排补贴</div>
				<!-- @click="handleToTag('public_status')" -->
			</div>
		
		</div>
		
		
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="ajaxGoodList"
		>
		
			<div v-if="finished && !list.length" class="empty-good" >
				<van-empty description="暂无商品" />
			</div>
			
			<!-- 商品列表 -->
			<div class="good-ul" >
				  <storeGoodItem
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          @storeInfo="storeInfo"
          ></storeGoodItem>
			</div>
		
		</van-list>
		
		
		
		
		
		
	</div>
</template>

<script>
	import { searchLeftArrow, searchHistoryIcon, sortDefault, sortDown, sortUp } from '@/tool/static-img';
	import storeGoodItem from './components/store-good-item';
	import { STORE_LIST } from '@/api/store';
	export default {
		components:{
			storeGoodItem
		},
		data() {
			return {
				searchLeftArrow, searchHistoryIcon,
				sortDefault, sortDown, sortUp,
				searchValue: localStorage.getItem('searchKey') || '',
				cate_id: this.$route.query.cate_id,
				current: 0,
				cate_id: this.$route.query.cate_id,
				sortStatus: 'default',
				localStorageHistory: [],
        
				// 是否
				distance: false,
				new_store: false,
				recommend: false,
				public_status: false,
				
				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
			}
		},
		created() {
			// 本地历史记录
			let searchHistory = localStorage.getItem('searchHistory');
			if(searchHistory) {
				this.localStorageHistory = JSON.parse(searchHistory);
			}else {
				this.localStorageHistory = [];
			}
			
		},
		methods: {
			handleToBack() {
				localStorage.removeItem('searchKey');
				this.$router.back()
			},
			onSearch(val) {
				
				if(!val.trim()) {
					this.resetInit();
					return;
				}
				
				// 去重
				this.localStorageHistory = this.localStorageHistory.filter(item => {
					return item != val;
				})
				
				
				this.localStorageHistory.unshift(val);
				this.localStorageHistory = this.localStorageHistory.slice(0, 20);
				
				localStorage.setItem('searchHistory', JSON.stringify(this.localStorageHistory));
				
				this.resetInit();
			},
			// 去搜索
			handleToSearch() {
				
				this.onSearch(this.searchValue);
			},
			// 切换tab
			handleToTag(tag) {
				this[tag] = !this[tag];
        this.resetInit();
			},
			resetInit() { //重置
			  this.page = 1;
			  this.list = [];
			  this.finished = false;
			
			  this.loadingPage = true;
			  this.ajaxGoodList()
      },
      // 进店铺
      storeInfo(id) {
            const latAndLng = localStorage.getItem('latAndLng');

            this.$router.push({
                name: 'storeInfo',
                query: {
                    id,
                    longitude: latAndLng ? latAndLng.split(',')[1] : '',
                    latitude: latAndLng ? latAndLng.split(',')[0] : '',
                }
            })
      },
			// 列表请求
			ajaxGoodList() {
			const latAndLng = localStorage.getItem('latAndLng');

            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            if(this.distance) {
                params['distance'] = 1000;
			}
			
			if(this.cate_id) {
				params['cate_id'] = this.cate_id;
			}

            params['new_store'] = this.new_store ? 1 : 0;
            params['recommend'] = this.recommend ? 1 : 0;
            params['public_status'] = this.public_status ? 1 : 0;
            
            params['longitude'] = latAndLng ? latAndLng.split(',')[1] : '';
            params['latitude'] = latAndLng ? latAndLng.split(',')[0] : '';
            if(this.searchValue && this.searchValue.trim()) {
              params['keyword'] = this.searchValue.trim();
			}
			
			const locationType = localStorage.getItem('locationType');
			const locationRegionCode = localStorage.getItem('locationRegionCode');

			if(locationType) {
				params['type'] = parseInt(locationType);
			}

			if(locationRegionCode) {
				params['region_code'] = locationRegionCode;
			}
				this.$http.post(STORE_LIST, params)
				.then(res => {
				  const {
				    list
				  } = res.data;
				
				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
				     // 加载状态结束
				     this.loadingPage = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
			}
		}
		
		
	}
</script>

<style lang="scss" >
	.store-list-wrap{
		position: relative;
		min-height: 100vh;
		padding-top: 1.8rem;
		background-color: #f5f5f5;
		padding-bottom: calc(0.2rem + constant(safe-area-inset-bottom));
		padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
		box-sizing: border-box;
		.top-fix{
			position: fixed;
			top: 0;
			width: 100%;
			height: 1.8rem;
			background-color: #fff;
			z-index: 1;
		}
		.search-box{
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.88rem;
			.van-icon-clear{
				display: block;
				padding-bottom: 4px;
			}
			.search-left-arrow{
				width: 0.4rem;
				height: 0.4rem;
				padding: 0.24rem 0 0.24rem 0.32rem;
			}
			.search-input{
				position: relative;
				width: 6.22rem;
				margin-left: 0.24rem;
				.search-btn{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 0.28rem;
					font-weight: 400;
					color: #fff;
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 1.12rem;
					height: 0.52rem;
					border-radius: 0.3rem;
					background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
				}
				.van-search{
					padding: 0;
					background-color: #f4f4f4;
					border-radius: 0.32rem;
					.van-search__content{
						background-color: #f4f4f4;
						border-radius: 0.32rem;
						.van-cell{
							align-items: center;
							padding: 3px 3px 3px 0;
						}
					}
					.van-field__control{
						height: 26px;
						width: 3.6rem;
						line-height: 26px;
						font-weight: 400;
						font-size: 0.28rem;
					}
					.van-icon{
						height: 20px;
					}
					.van-icon__image{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		
		.tab-ul{
      display: flex;
      align-items: center;
      justify-content: space-around;
			height: 0.92rem;
			.tab-li{
				display: flex;
        align-items: center;
        justify-content: center;
        height: 0.48rem;
        padding: 0 0.32rem;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        border-radius: 0.24rem;
        border: 0.02rem solid #F2F4F5;
        background: #F2F4F5;
        box-sizing: border-box;
        
				&.on{
					 background: rgba(243, 42, 35, 0.10);
            color: #F32A23;
            border-color: #F32A23;
				}
			}
		}
		
		.empty-good{
			padding-top: 1rem;
		}
		.good-ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0.24rem  0.24rem 0;
			
		}
	
	}
</style>